<template>
<el-button
    type="success" style="margin-left: 30px"
    plain
    icon="Plus"
    @click="handleAdd"
    >发布新的当月okr</el-button
  >
    <el-tooltip class="item" effect="dark" content="刷新" placement="top">
    <el-button circle icon="Refresh" @click="update" />
  </el-tooltip>
    <el-table
      :data="tableData"
      border
    style="width: 95%; margin: 20px auto; border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
    :header-cell-style="{
      background: '#95d475 !important',
      color: '#ffffff',
      border: 'none !important',
      textAlign: 'center',
    }"
    :span-method="(value) => rowSpanRulesHandler(value, tableData)"
    >
	
      <el-table-column prop="target" label="关键事项描述" width="180" />
      <el-table-column prop="totalScore" label="O分值" width="80" />
      <el-table-column prop="keyResult" label="要求达成的目标" />
      <el-table-column prop="keyWeight" label="考核分数" width="80"/>
	  <el-table-column prop="deptName" label="部门" width="180" />
	  <el-table-column prop="position" label="岗位" width="180" />
      <el-table-column prop="name" label="执行人员姓名" width="150"/>
      <el-table-column prop="ins" label="考核类型" width="150"/>
      <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
    </el-table>
    <Dialog
    v-model="dialogFormVisible"
    :close="close"
    :update="update"
    :selectContent="selectContent"
    :type="type"
    :title="title"
  ></Dialog>
</template>

<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import {getOkrRuleList,deleteOkrRule} from '@/api/okr'
import {getSubordinate} from '@/api/employee'
import Dialog from "./okrDialog";
import { ElMessage } from 'element-plus'

const tableData=ref()
onBeforeMount(()=>{
    let empId=JSON.parse(localStorage.getItem('userInfo')).id
    getOkrRuleList({empId}).then(data=>{
        tableData.value=data.data;
    })
})

const title = ref("新增okr项目");
const type = ref("add");
const selectContent = ref();
const dialogFormVisible = ref(false);
const handleAdd=()=>{
  title.value = "新增okr项目";
  type.value = "add";
  dialogFormVisible.value = true;
  selectContent.value={
    id: null,
    assessorId:"",
    totalScore: "",
    target: "",
    state: true,
    ins: "",
  }
}
const handleEdit = (index, row) => {
  selectContent.value = row;
  title.value = "编辑okr项目";
  type.value = "edit";
  dialogFormVisible.value = true;
};
const handleDelete = (index, row) => {
  deleteOkrRule({id:row.okrId}).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      update();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

const close = () => {
  dialogFormVisible.value = false;
};
const update = () => {
  let empId=JSON.parse(localStorage.getItem('userInfo')).id
 getOkrRuleList({empId}).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      tableData.value=data.data;
    } 
    else {
      ElMessage.error("更新失败");
    }
  });
};

const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
  let start = index;
  let multCompare = true;

  while (start < tableData.length && multCompare) {
    start++;
    count++;
    //multCompare = row[compareAttr] === tableData[start]?.[compareAttr];//依旧符合相等条件
    //console.log(row.empId,tableData[start].empId);
    if (start <= tableData.length - 1)
      multCompare = row.okrId === tableData[start].okrId;
    else multCompare = row.okrId === tableData[start - 1].okrId;
  }
  start--; //退出循环后的 新起始行 index

  if (start < tableData.length) {
    tableData[index][`${compareAttr}_count`] = count; //将合并的行数存储在行数据中的一个特定属性中
  }

  if (index > 0 && count + 1 === tableData[index - 1][`${compareAttr}_count`]) {
    return [0, 0]; //不需要合并
  }
  return [count, 1];
};


const columns = [
  "target",
  "totalScore",
  "keyResult",
  "keyWeight",
  "deptName",
  "positionName",
  "name",
  "ins",
];
const rowSpanRulesHandler = ({ row, column, rowIndex, columnIndex }, data) => {
  if (
    columns[columnIndex] === "target" ||
    columns[columnIndex] === "totalScore" ||
    columns[columnIndex] === "keyResult" ||
    columns[columnIndex] === "ins"
  ) {
    const r = compareSingleAttrReturnColSpan(row, "emp_id", rowIndex, data);
    return r;
  }
};
</script>
<style lang="scss" scoped>
.chapter{
    width: 300px;
    height: 300px;
    background-image: url("@/assets/chapter.png");
    background-size: contain;
    position: absolute;
    top: 160px;
    right: 50px;
}
:deep(.my-label) {
  background:#b3e19d !important;
  color: #fff !important;
}
:deep(.my-content) {
  background:#b3e19d !important;
  color: #fff !important;
}
</style>
